<template>
<app-framework :banner="banner">
  <content-container>
    <div class="product-desc">
      <p>教导型组织，并不是一个凭空创造的概念，而是在综合世界顶尖组织基本特征的基础上，通过综合概括所得出的一个概念：</p>
      <p>教导型组织，是以人本管理为根本，以教育引导为核心管理手段，最大限度释放人的能量、创造卓越成果的组织。</p>
      <p>分析来说，教导型组织，其事业理念即是以人本管理为根本，在这样的理念基础之上建立自己的发展战略，确定自己所需要的事业能力，最后根据自己所必备的事业能力来匹配教育体系。因此，教导型组织可以保持持续学习，永续创新。</p>
      <p>同时，教导型组织的概念并不封闭，它以任何优秀卓越的组织为榜样和目标，任何充满活力、学习力、竞争力，可持续发展，以事业为导向，对客户绝对负责，为社会创造价值的组织，我们都认为是教导型组织的学习对象，也都可以将其称之为教导型组织。放眼世界，几乎所有卓越的企业都是教导型组织的典范，比如宝洁、GE、IBM、同仁堂、阿里巴巴等。</p>
    </div>
    <section class="article">
      <div class="article_title flex">
        <h2 class="title">学员风采<br/>Alumni style</h2>
        <div class="flex-1"></div>
      </div>
      <div style="margin-bottom:20px;">
        <nuxt-link class="flex flex-strength article_item" v-for="(item, index) of articles.data" :key="index" :to="'/article?table=' + table + '&id=' + item.id">
          <div class="article_item_img" :style="{backgroundImage:'url(' + item.img + ')'}"></div>
          <div class="flex-1 flex flex-column flex-strength article_desc">
            <p class="flex-1 text">{{item.desc}}</p>
            <div class="flex">
              <span class="time">{{item.created_at}}</span>
              <span class="flex-1"></span>
              <span class="more">More</span>
            </div>
          </div>
        </nuxt-link>
      </div>
    </section>
  </content-container>
</app-framework>
</template>

<script>
import AppFramework from '../../components/AppFramework'
import ContentContainer from '../../components/ContentContainer'
import { getArticles } from '../../api/index-api'
export default {
  name: 'TeachOrganization',
  components: {ContentContainer, AppFramework},
  data() {
    return {
      table: 'jiaodaozhuzhi_article',
      type: '教导型组织',
      banner: [
        {img: '/images/banner-product.jpg'}
      ],
      articles: {
        data: []
      }
    }
  },
  created() {
    this.pageArticle()
  },
  methods: {
    pageArticle() {
      getArticles(this.table, 1).then(res => {
        this.articles.data = res.data.data
      }).then(() => {})
    }
  }
}
</script>

<style scoped lang="scss">
.product-desc{
  padding: 20px 0;
  p{
    margin:10px 0;
    line-height: 1.6;
    font-size: 14px;
    text-indent: 2em;
  }
}

.article{
  .article_title{
    margin-bottom: 20px;
    .title{
      padding-bottom: 5px;
      border-bottom: 2px solid $color-yellow;
    }
  }

  .article_item{
    margin-bottom:20px;
    background-color: #eaeaea;
    width: 49%;
    height: 20vh;
    float: left;
    text-decoration: none;
    &:nth-child(2n) {
      margin-left: 2%;
    }

    .article_item_img{
      width: 50%;
      max-width: 500px;
      background-size: cover;
      background-position: center;
    }

    .article_desc{
      padding: 20px;
      color: #000;
      .text{
        font-size: 14px;
      }
    }
    .time, .more{
      color: #666;
    }
    .more{
      border: 1px solid #666;
      padding: 1px 10px;
      border-radius: 2px;
      cursor: pointer;
    }
  }
}
</style>
